<template>
	<view>
		<view class="ditu">
			<view class="page-body">
				<view class="page-section page-section-gap">
					<map style="width: 100%; height: 800rpx;" :latitude="latitude" :longitude="longitude"
						:markers="covers">
					</map>
				</view>
			</view>
		</view>
		<view class="jd">
			<view class="xs">
				接单车辆
			</view>
			<view class="chep">
				晋HR2018 <view class="gh">
					更换车辆
				</view>
			</view>
		</view>
		<view class="wz">
			<view class="jdwz">
				当前位置<span style="color: #3282E7;padding-left: 30rpx;">{{jAdd}}</span>
			</view>
			<view class="xxdz" style="margin-top: 20rpx;">
				山西省太原市小店区创新街12号靠近滨河水岸
			</view>
		</view>
		<button class="button" @click="qrqd()">确认抢单</button>
		<view class="chengg" v-if="xsxs">
			<view class="zizizi">
				恭喜您，抢单成功！
			</view>
			<button class="haode" @click="haod1e()">
				<view v-for="task in tasks" :key="task.id">
					好的 ({{ task.remainingTime }}s)
				</view>
			</button>
		</view>
	</view>
</template>

<script setup>
	//引入存放jwt的容器
	import {
		tokenStore
	} from '@/stores/token';
	//存放用户信息的容器
	import {
		userStore
	} from '@/stores/user';
	//引入容器
	const t = tokenStore()
	const u = userStore()
	//引入拦截器
	import '@/config/requst.js'
	import {
		ref
	} from 'vue';
	import {
		http
	} from '@/config/requst.js';
	import {
		reactive,
		onMounted,
		onUnmounted
	} from 'vue';
	const id = ref(0);
	const xsxs = ref(false);
	const latitude = ref();
	const longitude = ref();
	const tasks = reactive([{
		id: 1,
		remainingTime: 3
	}, ]);
	const jAdd = ref()
	let intervalId;
	const jd = ()=>{
		uni.getLocation({
			type: 'wgs84', // 返回的坐标类型，wgs84 表示国际标准的经纬度
			success: function(res) {
				console.log(res)
				console.log('当前位置的经度：' + res.longitude);
				latitude.value= res.latitude;
				longitude.value=res.longitude;
				console.log('当前位置的纬度：' + res.latitude);
				hq()
			},
			fail: function(err) {
				console.log('获取位置失败：' + err.errMsg);
			}
		});
	}
	onMounted(() => {
		jd()
	});

	onUnmounted(() => {
		clearInterval(intervalId);
	});
	const covers = (ref([{
			// latitude: 37.781672,
			// longitude: 112.555023,
			iconPath: '../../../static/location.png'
		},
		{
			// latitude: 37.781672,
			// longitude: 112.555023,
			iconPath: '../../../static/location.png'
		}
	]));
	const qrqd = () => {
		xsxs.value = 'true';
		intervalId = setInterval(() => {
			tasks.forEach(task => {
				if (task.remainingTime > 0) {
					task.remainingTime -= 1;
				}
			});
		}, 1000);
	}
	//向后端发送请求获取当前司机的地址
	const hq= async()=>{
		const res = await http({
			url:'/map/reverse/'+latitude.value+'/'+longitude.value
		})
		console.log(res)
		jAdd.value=res.shuju
	}
</script>

<style scoped>
	.ditu {
		height: 800rpx;
		/* border: 1px solid #000; */
		margin-bottom: 30rpx;
	}

	.xs {
		font-size: 36rpx;
		height: 60rpx;
		line-height: 60rpx;
		/* border: 1px solid #000; */
		padding-left: 20rpx;
		color: #B6B6B6;
	}

	.chep {
		display: flex;
		font-size: 36rpx;
		height: 60rpx;
		line-height: 60rpx;
		/* border: 1px solid #000; */
		padding-left: 20rpx;
		justify-content: space-between;
	}

	.gh {
		color: #002F93;
		padding-right: 50rpx;
	}

	.wz {
		margin-top: 20rpx;
	}

	.jdwz {
		height: 60rpx;
		line-height: 60rpx;
		padding-left: 20rpx;
		font-size: 28rpx;
	}

	.xxdz {
		height: 60rpx;
		line-height: 60rpx;
		padding-left: 20rpx;
		font-size: 28rpx;
	}

	.button {
		margin-top: 30rpx;
		background-color: #CCD5E9;
		color: #FFF8F6;
		border-radius: 50rpx;
		width: 700rpx;
	}

	.chengg {
		/* border: 1px solid #000; */
		position: fixed;
		/* position: absolute; */
		bottom: 760rpx;
		left: 120rpx;
		width: 500rpx;
		height: 380rpx;
		background-color: #FFF8F6;
		border-radius: 10rpx;
	}

	.zizizi {
		/* border: 1px solid #555; */
		height: 260rpx;
		text-align: center;
		line-height: 260rpx;
	}

	.haode {
		font-size: 32rpx;
		width: 260rpx;
		border-radius: 50rpx;
		background-color: #002F93;
		color: #FFF8F6;
	}
</style>